Zero Runtime CSS

❓질문

제로 런타임 css란 무엇인가요?

💡 조사하기전 내가 알고 있던 내용

제로 런타임 css는 css-in-js와 관련이 있습니다. 과거 css-in-js방식에서는 스타일을 컴포넌트안에 작성해서 동적으로 생성하는것으로 알고있습니다 하지만 이 방식은 런타임에서 css를 만들기때문에 성능에 영향을 미칠수있습니다.

그래서 빌드 시점에 css를 다 만들어서 내려주는 방식을 제로 런타임 css이라고합니다

🏫 정리한 내용

Zero Runtime CSS는 기존의 CSS-in-JS 방식을 보완하기 위해 등장한 기법입니다.
스타일을 런타임에 적용하지 않고 빌드 타임에 CSS를 생성하여 사용자가 페이지를 로드할 때 이미 최적화된 CSS를 제공하는 방식입니다.

CSS는 정적인 파일처럼 브라우저가 캐싱할 수 없어서 기존 방식은 매번 렌더링 될때마다 새롭게 계산하기도 합니다. 이 때문에 불필요한 CSS 코드 까지 포함되는 경우가 있는데 이를 방지하여 성능 향상을 기대할 수 있고 추가로 최적화된 스타일, 서버컴포넌트와 호환성 증가등 다양한 이점을 누릴 수 있습니다.

단 빌드시간이 길어질수있고, 런타임에서 동적으로 생성해야 하는 스타일을 구현하는데는 추가적인 로직을 도입을 해야합니다. 예를 들어 사용자 입력값에 따라 스타일이 달라지는 경우등이 있습니다.